<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <style>

        .content{
            /* 设置边框*/
            border: 1px solid grey;
            width: 400px;
            background: white;
            margin-left: 1300px;
            text-align: center;
        }

        .top{
            background: #dfdede;
            height: 35px;
            font-size: 12px;
            color: gray;
        }
        a{
            color: gray;
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
        a:link{
            color: blue;
        }
        a:visited{
            color: gray;
        }
        a:active{
            color: red;
        }
        .btn{
            width: 130px;
            height: 37px;
            background: red; /*背景颜色*/
            color: white;
            font-size: 18px;
            border: 0px;
            font-weight: 600; /*字体粗细*/
            vertical-align: middle; /*垂直居中*/
            margin-left: -10px; /*左外边距*/
            outline: none; /*去掉获得焦点时的边框*/
            cursor: pointer; /*鼠标悬浮显示小手*/

        }
        .inp{
            border: 2px solid red;
            width: 500px;
            height: 31px;
            outline: none;/*去掉获得焦点时的边框*/
        }
    </style>
</head>
<body>
<div class="top">
    <div style="float: left;padding: 5px;margin-left: 100px">
        <a href="#">喵，欢迎来天猫请登录免费注册</a>&nbsp;&nbsp;
        <a href="#">请您登陆</a>&nbsp;&nbsp;
        <a href="#">免费注册</a>&nbsp;&nbsp;
    </div>
    <div style="float: right;padding: 5px;margin-right: 100px">
        <a href="#">我的淘宝</a>&nbsp;&nbsp;
        <a href="#">购物车</a>&nbsp;&nbsp;
        <a href="#">收藏夹</a>&nbsp;&nbsp;
        <a href="#">手机版淘宝网</a>&nbsp;&nbsp;
        <a href="#">手机版淘宝网</a>&nbsp;&nbsp;
        <a href="#">网站导航</a>
    </div>
    <div style="clear: both"></div>

    <div class="nav">
        <table style="margin-left: 300px">
            <tr>
                <td><img src="img/logo.png" height="120" width="420"/></td>
                <td> <input class="inp" type="text" placeholder=" 搜索 天猫 商品/品牌/店铺">
                    <button type="button" class="btn">搜&nbsp;&nbsp;&nbsp;&nbsp;索</button></td>
            </tr>
        </table>
    </div>

    <div style="background: url(img/1.jpg);width: 100%;height: 550px">
        <div class="content">
            <div>注册详情</div><hr>
            <div>
                <label for="username">姓名：</label>
                <input type="text" id="username" name="username" placeholder=" 在此输入用户名" autocomplete="off">
            </div><hr>
            <div>
                <label for="password"> 密码：</label>
                <input type="number" id="password" name="password" placeholder=" 在此输入密码" autocomplete="off">
            </div><hr>
            <div>
                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email" placeholder=" 在此输入邮箱">
            </div><hr>
            <div>
                <label for="tel">手机：</label>
                <input type="tel" id="tel" name="tel" placeholder=" 在此输入手机号">
            </div><hr>

            <div>
                <div>
                    <label for="sex">性别：</label>
                    <input type="radio" id="sex" name="sex" value="">男
                    <input type="radio"  name="sex" value="0">女
                </div>
                <div>
                    <label for="hobby">爱好：</label>
                    <input type="checkbox" id="hobby" name="hobby" value="music" checked>音乐
                    <input type="checkbox" name="hobby" value="movie">电影
                    <input type="checkbox" name="hobby" value="game">游戏<br>
                </div>
                <div>
                    <label for="birthday">出生日期：</label>
                    <input type="date" id="birthday" name="birthday"><br>
                </div>
                <div>
                    <label for="tel">所在城市：</label>
                    <select name="" id="">
                        <option value="">——请选择所在省城市——</option>
                        <optgroup label="省会城市">
                            <option>武汉</option>
                            <option>杭州</option>
                        </optgroup>
                        <optgroup label="直辖市">
                            <option>天津</option>
                            <option>北京</option>
                        </optgroup>
                    </select>
                </div><hr>
                <div>
                    <textarea name="desc" id="desc" cols="30" rows="10" placeholder="个性签名"></textarea>
                </div>
                <hr>
                <div>
                    <button type="submit">注册</button>
                    <button type="reset">重置</button>
                </div>
            </div>
      </div>
    </div>
</div>
</body>
</html>